<template>
  <view class="page">
    <!-- 操作按钮 -->
    <view class="flex align-center gap margin-top padding-lr">
      <u-button shape="circle" size="large" :customStyle="{ color: themePrimary }" :color="themeTertiary" text="新增教室"
        type="primary" @click="toAddClassroom"></u-button>
      <u-button shape="circle" size="large" :customStyle="{ color: themePrimary }" :color="themeTertiary" text="时间段管理"
        type="primary" @click="toTimeManage"></u-button>
    </view>
    <!-- 主内容区域 -->
    <view class="main">
      <Card class="margin-bottom-sm" :title="`教室${item}`" v-for="item in 10" :key="item">
        <template #right>
          <u-icon name="/static/icon/icon-trash.png" color="#999" size="16" @click="handleDelete(item)"></u-icon>
        </template>
      </Card>
      <u-modal :show="show" title="提示" :content="content" :showCancelButton="true" @confirm="confirm"
        @cancel="show = false">
      </u-modal>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import Card from '@/components/Card/index.vue';
import { useTheme } from '@/composables/useTheme';
const { themePrimary, themeSecondary, themeTertiary } = useTheme();

const show = ref(false);
const content = ref('确定要删除吗？');
// 新增教室
const toAddClassroom = () => {
  uni.navigateTo({
    url: '/pages/principal/education/classroomManage/addClassroom'
  });
};

const toTimeManage = () => {
  uni.navigateTo({
    url: '/pages/principal/education/classroomManage/timeManage'
  });
};


const handleDelete = (item) => {
  console.log(item);
  show.value = true;
};

const confirm = () => {
  console.log('confirm');
  show.value = false;
};
</script>
